<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '环形图',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false // 悬停时不显示标签
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 3.49,
                name: '3.49',
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 1,
                    y: 1,
                    x2: 1, // 从左到右渐变
                    y2: 0,
                    colorStops: [
                      { offset: 0, color: '#f7be1d' }, // 渐变色起始颜色
                      { offset: 1, color: '#f7be1d00' }  // 渐变色结束颜色
                    ]
                  }
                }
              },
              {
                value: 2,
                name: '2',
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 1,
                    y: 1,
                    x2: 0, // 从左到右渐变
                    y2: 0,
                    colorStops: [
                      { offset: 0, color: '#3ea0ff' }, // 渐变色起始颜色
                      { offset: 1, color: '#3ea0ff00' }  // 渐变色结束颜色
                    ]
                  }
                }
              },
              {
                value: 0.25,
                name: '0.25',
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 1,
                    y: 0,
                    x2: 0, // 从左到右渐变
                    y2: 0,
                    colorStops: [
                      { offset: 0, color: '#84FAB0' }, // 渐变色起始颜色
                      { offset: 1, color: '#3dfbaf03' },  // 渐变色结束颜色
                      
                    ]
                  }
                }
              }
            ]
          }
        ],
        graphic: {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: '总数\n3.74', // 环形图中间的文字和数据
            textAlign: 'center',
            fill: '#333', // 文字颜色
            fontSize: 20,
            fontWeight: 'bold'
          }
        }
      };

      myChart.setOption(option);
    }
  }
};
</script>